$(function() {
    // 数组排列组合
    function doExchange(doubleArrays){
        var len=doubleArrays.length;
        if(len>=2){
            var len1=doubleArrays[0].length;
            var len2=doubleArrays[1].length;
            var newlen=len1*len2;
            var temp=new Array(newlen);
            var index=0;
            for(var i=0;i<len1;i++){
                for(var j=0;j<len2;j++){
                    temp[index]=doubleArrays[0][i]+','+doubleArrays[1][j];
                    index++;
                }
            }
            var newArray=new Array(len-1);
            for(var i=2;i<len;i++){
                newArray[i-1]= doubleArrays[i];
            }
            newArray[0]=temp;
            return doExchange(newArray);
        }
        else{
            return doubleArrays[0];
        }
    }

    // tab切换
    var ulResult = $('[data-role="style-result"]>li');
    $(document).on('click', '[data-role="style-tab"] li', function () {
        var index = $(this).index();
        $(this).addClass('is-active').siblings().removeClass('is-active');
        ulResult.eq(index).addClass('is-active').siblings().removeClass('is-active');
    })


    $(document).on('click', '[data-role="selectall"]', function() {
        var body = $(this).closest('li').find('tbody');
        var index = $(this).closest('.ws-goodstyle__selectAll').parent('li').index();
        if(typeof($(this).attr('checked')) == 'undefined') {
            $(this).closest('.ws-goodstyle__selectAll').next('.ws-goodstyle__item').find('input').prop('checked', '');
            body.html('');
            $('[data-role="style-tab"] li').eq(index).find('span').html(0);
            $('[data-role="style-tab"] li').eq(index).attr('data-value', '')
        } else {
            var input = $(this).closest('.ws-goodstyle__selectAll').next('.ws-goodstyle__item').find('input');
            var inputLen = input.length;
            input.prop('checked', 'checked');
            var html = '';
            var dataValueArr = [];
            var dataIdArr = [];
            for(var i = 0; i < inputLen;i++) {
                html += '<tr>\
                            <td>\
                              <input type="text" value="'+input.eq(i).val()+'">\
                            </td>\
                            <td>\
                                <span class="lnk" data-role="img">选择图片</span>\
                                <span class="sel-imgs-area"></span>\
                            </td>\
                        </tr>';
                        dataValueArr.push(input.eq(i).val());
                        dataIdArr.push(input.eq(i).attr('data-id'));
            }
            body.html(html);
            $('[data-role="style-tab"] li').eq(index).find('span').html(inputLen);
            var dataValueStr =  dataValueArr.join(',');
            var dataIdStr =  dataIdArr.join(',');

            $('[data-role="style-tab"] li').eq(index).attr('data-value', dataValueStr)
            $('[data-role="style-tab"] li').eq(index).attr('data-id', dataIdStr)
        }
    })

    $(document).on('change', '.ws-goodstyle__item li input', function() {
        var index = $(this).closest('.ws-goodstyle__item').parent('li').index();
        var inputCheck = $(this).closest('.ws-goodstyle__item').find('li').find('input:checked');
        var inputCheckLen = inputCheck.length;
        $('[data-role="style-tab"] li').eq(index).find('span').html(inputCheckLen);
        var body = $(this).closest('.ws-goodstyle__item').next('.spec-img').find('tbody');
        var html = '';
        var dataValueArr = [];
        var dataIdArr = [];
        for(var i = 0; i < inputCheckLen;i++) {
            html += '<tr>\
                        <td>\
                          <input type="text" value="'+inputCheck.eq(i).val()+'">\
                        </td>\
                        <td>\
                            <span class="lnk" data-role="img">选择图片</span>\
                            <span class="sel-imgs-area"></span>\
                        </td>\
                    </tr>';
                    dataValueArr.push(inputCheck.eq(i).val())
                    dataIdArr.push(inputCheck.eq(i).attr('data-id'));
        }
        var dataValueStr =  dataValueArr.join(',');
        var dataIdStr =  dataIdArr.join(',');
        $('[data-role="style-tab"] li').eq(index).attr('data-value', dataValueStr)
        $('[data-role="style-tab"] li').eq(index).attr('data-id', dataIdStr)
        body.html(html);
    })

    // 生成商品
    $(document).on('click', '[data-role="generate"]' ,function() {
        var dom = $('[data-role="style-tab"] li span');
        for(var i = 0,len = dom.length; i < len;i++) {
            if(dom.eq(i).html() == 0) {
                alert('每个规格项至少选中一项，才能组合成完整的货品信息。');
                return;
            }
        }

        var li = $('[data-role="style-tab"] li');
        var exchangeArr = [];
        var textArr = [];
        for(var i = 0, len = li.length;i < len;i++) {
            exchangeArr.push(li.eq(i).attr('data-value').split(','))
            textArr.push(li.eq(i).find('i').eq(0).html())
        }
        var ret = doExchange(exchangeArr);
        $('.ws-goodstyle__tableTit span').html(ret.length)
        var resultHtml = '';
        for (var i = 0; i < ret.length; i++) {
            var arr = ret[i].split(',');
            var nameArr = [];
            var nameStr = '';
            for(var j = 0,len = arr.length;j < len;j++) {
                nameArr.push(textArr[j]+':'+arr[j]);
            }
            nameStr = nameArr.join(',');
            resultHtml += '<tr>\
                            <td>'+nameStr+'</td>\
                            <td>\
                              <input type="text" value="45-'+i+'">\
                            </td>\
                            <td>\
                              <input type="checkbox" checked="">\
                            </td>\
                            <td>\
                              <input class="x-input" type="text" value="3" >\
                            </td>\
                            <td>0</td>\
                            <td>\
                                <input class="x-input" type="text" value="10.000">\
                                <img src="img/btn_edit.gif" align="absmiddle">\
                                <a href="javascript:void(0);">会员价</a>\
                            </td>\
                            <td>\
                                <input class="x-input" type="text" value="12.000">\
                            </td>\
                            <td>\
                                <input class="x-input" type="text" value="33.000">\
                            </td>\
                            <td>\
                                <input class="x-input" type="text" value="3.000" size="4">\
                            </td>\
                            <td>\
                                <input class="x-input" type="text" value="3"  size="4">\
                            </td>\
                            <td>\
                                <input type="checkbox" value="true" size="4" data-role="moren">\
                            </td>\
                            <td>\
                                <a href="javascript:void(0);" class="clean " title="不生成此货品">清除</a>\
                            </td>\
                        </tr>';
        }

        $('[data-role="styleResult"]').html(resultHtml);
    })

    // 清除
    $(document).on('click', '[data-role="styleResult"] .clean', function() {
        $(this).closest('tr').find('input[type=text]').val('');
        $(this).closest('tr').find('input[type=checkbox]').prop('checked', '');
    })

    // 默认
    $(document).on('change', '[data-role="moren"]', function() {
        $(this).closest('tr').siblings().find('[data-role="moren"]').prop('checked','');
    })

    // 图片位置索引
    var imgIndex;
    // 选择图片
    BUI.use(['bui/overlay','bui/form'],function(Overlay,Form){

     var dialog = new Overlay.Dialog({
           title:'关联商品图片',
           width:700,
           height:360,
           //配置DOM容器的编号
           contentId:'chooseImg',
           buttons:[{
                text:'保存',
                elCls : 'button',
                handler : function(){
                    var imgChecked = $('.division input[type="checkbox"]:checked');
                    var imgArr = [];
                    var imgId = [];

                    for(var i = 0,len = imgChecked.length;i < len;i++) {
                        imgArr.push(imgChecked.eq(i).attr('imgsrc'));
                        imgId.push(imgChecked.eq(i).attr('id'));
                    }
                    var imgArea = $('[data-role="style-result"] li.is-active').find('[data-role="gridstyle"] tbody tr').eq(imgIndex).find('.sel-imgs-area');
                    var imgItemVal = $('[data-role="style-result"] li.is-active').find('[data-role="gridstyle"] tbody tr').eq(imgIndex).find('td').eq(0).find('input').val();

                    var html ='';
                    for(var i = 0,len = imgArr.length;i < len;i++) {
                        html += '<img src="'+imgArr[i]+'" data-id="'+imgId[i]+'">'
                    }
                    imgArea.html(html)
                    $.each($('[data-role="style-result"] li.is-active .ws-goodstyle__item li'), function(index, item) {
                        if($(item).find('input').val() == imgItemVal) {
                            if(imgArea.find('img').length == 0) {
                                $(item).find('input').attr('data-imageId', "");
                                $(item).find('input').attr('data-imageUrl', "");
                            } else {
                                var tempImageId = "";
                                var tempImageUrl = "";
                                var tempImageIdArr = [];
                                var tempImageUrlArr = [];
                                $.each(imgArea.find('img'), function(indexDir, itemDir) {
                                    tempImageIdArr.push($(itemDir).attr('data-id'));
                                    tempImageUrlArr.push($(itemDir).prop('src'));
                                })
                                tempImageId = tempImageIdArr.join(',');
                                tempImageUrl = tempImageUrlArr.join(',');
                                $(item).find('input').attr('data-imageId', tempImageId);
                                $(item).find('input').attr('data-imageUrl', tempImageUrl);
                            }

                        }
                    })
                    this.close();
                }
              }
            ],
         });
       $(document).on('click','[data-role="img"]', function () {
           imgIndex = $(this).closest('tr').index();
           dialog.show();
       });
     });

    // 保存
    $(document).on('click', '[data-role="styleSave"]', function() {
        var len = $('[data-role="styleResult"] tr').find('[data-role="moren"]:checked').length;
        if(len == 0) {
            alert('请选择默认商品');
            return;
        } else {
            var productsJson = [];

            $.each($('[data-role="styleResult"] tr'), function(index, item) {
                var productsJsonItem = {
                    specInfo: "",
                    specJson: []
                }
                var str = $(item).find('td').eq(0).html();
                productsJsonItem.specInfo = str;
                var strArr = str.split(',');
                $.each(strArr, function(indexDir, itemDir) {

                    var itemStr = itemDir.split(':')[1];
                    $.each($('[data-role="goodstyleitem'+indexDir+'"]').find('li'), function(indexDir2, itemDir2) {
                        var itemDom = $(itemDir2).find('input');
                        var itemDomIndex = itemDom.closest('li').index();

                        if(itemDom.val() == itemStr) {
                            var obj = {};
                            var index1 = itemDom.closest('.ws-goodstyle__result>li').index();
                            obj.specId = $('[data-role="style-tab"] li').eq(index1).attr('data-spec-id');
                            obj.specValueId = itemDom.attr('data-id');
                            obj.imageId = itemDom.attr('data-imageid') || "";
                            obj.imageUrl = itemDom.attr('data-imageurl') || "";
                            productsJsonItem.specJson.push(obj);
                        }
                    })
                })

                productsJson.push(productsJsonItem);
            })

            console.log(productsJson);
        }
    })

})
